<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WoNiuShop</title>
<link rel="shortcut icon" href="icon.png" type="image/x-icon" />
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/slider.css" type="text/css" />
<!-- <style>
html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	padding-top: 100px;
	font-family: '微软雅黑', '黑体', serif;
	height: 100%;
	box-sizing: border-box;
}

span {
	background-repeat: no-repeat;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: black;
}

a:hover {
	color: cornflowerblue;
	text-decoration: underline;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* 头部 */
#header {
	width: 100%;
	position: fixed;
	height: 60px;
	background-color: blue;
	top: 0px;
	background-color: #f8f8f8;
	box-shadow: 0 0 5px #333;
}

/* 表示id为header的HTML标签的所有直接子元素（div） */
#header>div {
	float: left;
	line-height: 60px;
}

#header #logo {
	margin-left: 30px;
	font-size: 24px;
	font-weight: bold;
}

#header #logo a {
	color: #666;
}

#header #userzoom {
	float: right;
	margin-right: 30px;
}

#header #userzoom a {
	font-size: 16px;
	margin-left: 15px;
	padding-left: 25px;
}

/* 版权信息 */
#footer {
	height: 50px;
	background-color: #F8F8F8;
	width: 100%;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	color: #999;
	box-shadow: 0 0 5px #333;
	bottom: 0px;
	position: fixed;
}

/* 登录 和注册 */
#login, #register {
	width: 400px;
	height: 450px;
	border: 1px solid #ccc;
	box-shadow: 0 0 10px #000;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 6px;
	position: fixed;
	top: 20px;
	left: 50%;
	margin-left: -200px;
	background-color: #fff;
	display: none;
}

.login-title, .register-title {
	text-align: center;
	height: 50px;
	line-height: 50px;
}

.login-form, .register-form {
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
/* 注册框 */
#register {
	height: 600px;
}

.form-group {
	padding: 12px 5px;
	margin: 10px 0px;
	font-size: 16px;
}

.check-login {
	margin-left: 130px;
	padding-bottom: 10px;
}

#verification_code {
	width: 110px;
	line-height: 50px;
	border-radius: 4px 4px 4px 4px;
	outline: none;
	font-size: 16px;
	text-align: center;
	transition: all 0.5s;
	border: 1px solid #ccc;
}

#page-black {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
}

.outer-black {
	z-index: 99;
}

/* icon 设置  */
.icon {
	background-repeat: no-repeat;
	background-position: left center;
}

.i-user {
	background-image: url(icon/登录.png);
}

.i-userinfo {
	background-image: url(icon/用户.png);
}

.i-password {
	background-image: url(icon/密码.png);
}

.i-register {
	background-image: url(icon/注册.png);
}

/* 针对form */
.f-span {
	display: inline-block;
	width: 60px;
	height: 38px;
	background-color: #CCCCCC;
	background-position: center center;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
}

.g-span {
	display: inline-block;
	width: 60px;
	height: 38px;
	padding-top: 20px;
}

.f-input {
	padding: 10px 15px;
	font-size: 16px;
	border-radius: 0 4px 4px 0;
	border: 1px solid #ccc;
	outline: none;
	height: 40px;
	box-sizing: border-box;
	margin-top: -1px;
	margin-left: 60px;
	width: 300px;
	transition: all 0.5s;
}

.f-input:focus {
	border: 1px solid #1E90FF;
	box-shadow: 0 0 5px #1E90FF;
}
/*按钮*/
.btn {
	display: inline-block;
	padding: 15px 25px;
	text-align: center;
	color: white;
	/* line-height: 1.42857143; */ /* 行高为数字和字体尺寸相乘的数值 */
	margin: 0;
	border-radius: 4px;
	vertical-align: middle;
	cursor: pointer;
	white-space: nowrap; /* 文字不换行 */
	border: none;
	outline: none;
	text-shadow: 0px 1px 0px #2f6627;
}

.btn:active {
	top: 1px;
	position: relative;
}

.l-btn {
	margin-top: 20px;
	text-align: right;
}
/* 红色按钮 */
.btn-danger {
	background-color: darkred;
}

/* 关闭 */
.close {
	height: 50px;
	line-height: 50px;
	width: 25px;
	position: absolute;
	right: 0px;
	top: 0px;
	padding-right: 10px;
}

.close img {
	vertical-align: middle;
}

.close img:hover {
	cursor: pointer;
}

/*  轮播图    */
#show {
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

.slider {
	width: 1200px; /* 设置一个默认值，防止用户禁用js而现实异常，具体数值由js设定 */
	height: 375px;
	overflow: hidden;
}

.slider .item {
	float: left;
	width: 20%;
	height: 100%;
}

.item img {
	width: 100%;
}

.types {
	height: 220px;
	width: 1200px;
}

.type-item:hover {
	background-color: #ddd;
	cursor: pointer;
}

.type-item {
	width: 20%;
	height: 100%;
	border: 1px solid #ccc;
	float: left;
	box-sizing: border-box;
}

.type-img {
	height: 130px;
	text-align: center;
}

.type-content {
	height: 70px;
	padding: 0 10px;
	box-sizing: border-box;
}

.type-content h3 {
	margin: 0;
}
/*注册*/
.registe-input {
	font: 16px Times New Roman;
	height: 40px;
	line-height: 40px;
	width:150px;
	margin: 10px 0;
	border-radius: 4px 4px 4px 4px;
	border: 1px solid #ccc;
}

.code {
	width: 100px;
	height: 30px;
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 4px 4px 4px 4px;
	margin-bottom:10px;
}
</style> -->
<!-- <script>
	function changeImg() {
		document.getElementById("checkimg").src = "CheckCodeServlet?"
				+ Math.random();
		document.getElementById("checkimg1").src = "CheckCodeServlet?"
			+ Math.random();
	}
</script> -->
</head>
<body>
<%@include file="loginandregister.jspf" %>
	<!-- <div id="page-black"></div>
	
		 登录  注册部分
		

	 
	登录
	
	<form action="GoIndexServlet" method="post">
		<div id="login" class="outer-black">
			 关闭登录注册弹窗
			<div class="close">
				<img src="icon/关闭.png" onclick="closeLoginBox()">
			</div>
			<div class="login-title">登录</div>
			<div class="login-form">
				<div class="form-group">
					<span class="i-user f-span"><input type="text" name="uName"
						placeholder="请输入账号" class="f-input" required="required" /></span>
				</div>
				<div class="form-group">
					<span class="i-password f-span"><input type="password"
						name="uPwd" placeholder="请输入密码" class="f-input"
						required="required" /> </span>
				</div>
				<div class="check-login">
					<input type="text" id="verification_code" name="check"
						placeholder="请输入验证码" required="required" /> <img 
						src="CheckCodeServlet" id="checkimg" onclick="changeImg()" />
				</div>

			</div>
			<div class="l-btn">
				<input type="submit" class="btn btn-danger " value="登录" />
			</div>
		</div>
	</form>
	注册
	<form action="GoRegisterServlet" method="post">
		<div id="register" class="outer-black">
			<div class="close">
				<img src="icon/关闭.png" onclick="closeRegisterBox()">
			</div>
			<div class="register-title">注册</div>
			<div class="register-form">
				<div class="registe-user">
					用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="registe-input"
						type="text" onblur="checkName(this.value)" name="uName" placeholder="&nbsp;&nbsp;请输入账号" required="required" />
						<span id="unametips" style="font-size:12px;color:#ccc;">请不要输入汉字</span>
				</div>
				
				<div class="registe-user">
					密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input
						class="registe-input" type="password"
						placeholder="&nbsp;&nbsp;请输入密码"  name="uPwd" id="upwd" required="required" />
						<span style="font-size:12px;color:#ccc;">请输入6位以上字符</span>
				</div>
				<span id="uPwdPits"></span>
				<div class="registe-user">
					确认密码:&nbsp;&nbsp;&nbsp;<input class="registe-input" type="password"
						placeholder="&nbsp;&nbsp;请确认你的密码" id="repwd" onblur="doblur()" required="required" />
						<span id="upwdtips" style="font-size:12px;color:#ccc;">两次密码要输入一致哦</span>
				</div>
				
				<div class="registe-user">
					手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input
						class="registe-input" id="phoneNum" name="phoneNum" type="text" onblur="checkPhoneNum(this.value)" placeholder="&nbsp;&nbsp;请输入手机号"
						required="required" />
						<span id="phonetips" style="font-size:12px;color:#ccc;">请输入正确的手机号</span>
				</div>
				
				<div class="registe-user">
					邮&nbsp;&nbsp;箱&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="registe-input"
						type="email" placeholder="&nbsp;&nbsp;请输入邮箱号" id="emailNum" name="email" onblur="checkEmail(this.value)" equired="required" />
						<span id="emailtips" style="font-size:12px;color:#ccc;">请输入有效的邮箱号</span>
				</div>
				
				<div class="registe-user">
					验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="code"
						type="text" onblur="checkCode(this.value)" name="checknum" id="checkNum" placeholder="&nbsp;请输入验证码" required="required" /><img
						src="CheckCodeServlet" id="checkimg1" onclick="changeImg()" />
						<span id="codePits"></span>
				</div>
				
			</div>
			<div class="l-btn">
				<input type="submit" class="btn btn-danger " value="注册"/>
			</div>
		</div>
	</form>


	
		 登录 注册结束
		
	<div id="header">
		<div id="logo">
			<a href="#">WoniuShop</a>
		</div>
		<div id="userzoom">
			if not login , use this code block
			<div id="n-inout">
				<a href="javascript:void(0)" onclick="showLoginBox()" class="icon i-user">登录</a> <a
					href="javascript:void(0)" onclick="showRegisterBox()" class=" icon i-register">注册</a>
			</div> -->
			<!-- if logined，use this -->
			<!-- <div id="y-inout">
					<a href="allorder.html" class="icon i-order">订单</a>
					<a href="shopcar.html" class="icon i-shopcar">购物车</a>
					<a href="" class="icon i-user">13888888888</a>
					<a href="" class="icon i-loginout">注销</a>
				</div> -->
		<!-- </div>
	</div> -->
	<div id="show">
		<ul class="slider">
			<li class="item"><img src="imgs/1.jpg"></li>
			<li class="item"><img src="imgs/2.jpg"></li>
			<li class="item"><img src="imgs/3.jpg"></li>
			<li class="item"><img src="imgs/4.jpg"></li>
			<li class="item"><img src="imgs/5.jpg"></li>
		</ul>

		<ul id="navul" class="types">
			<%-- <c:forEach items="${categoryList}" var="category">
			<li class="type-item"><a href="paging.html">
					<div class="type-img">
						<img src="${category.categoryImgPath}">
					</div>
					<div class="type-content">
						<h3>${category.cName}</h3>
						<p>${category.productDescription}</p>
					</div>
			</a></li> --%>
			
			<%-- <c:forEach items="${categoryList}" var="category">
			<li class="type-item">
				<div class="type-img">
					<img src="${category.categoryImgPath}">
				</div>
				<div class="type-content">
					<h3>${category.cName}</h3>
					<p>${category.productDescription}</p>
				</div>
			</li>
			</c:forEach> --%>
			<!-- <li class="type-item">
				<div class="type-img">
					<img src="imgs/types/jacket.png">
				</div>
				<div class="type-content">
					<h3>衣服</h3>
					<p>毛衣 T恤</p>
				</div>
			</li>
			<li class="type-item">
				<div class="type-img">
					<img src="imgs/types/pants.png">
				</div>
				<div class="type-content">
					<h3>裤子</h3>
					<p>休闲裤</p>
				</div>
			</li>
			<li class="type-item">
				<div class="type-img">
					<img src="imgs/types/suit.png">
				</div>
				<div class="type-content">
					<h3>连衣裙</h3>
					<p>公主裙</p>
				</div>
			</li> -->
		</ul>

	</div>

	<div id="footer">蜗牛创想科技-woniushop&copy; 版权所有</div>
	<script src="js/basic.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/solider.js"></script>
	<script src="js/index.js"></script>
	<script>
	/* 使用JQuery的Ajax来发送请求 */
	$(function() {
		$.ajax({
			type:"POST",
			url:"GetCategoryInfoServlet",
			async:true,
			datatype:"json",
			success:function(data){
				$.each(JSON.parse(data),function(index,ele){
					
					$("#navul").append("<li class='type-item'><a href='GetCategoryGoodsServlet?cid="+ele.id+"&currentPage=1'><div class='type-img'><img src="+ele.categoryImgPath+"></div><div class='type-content'><h3>"+ele.cName+"</h3><p>"+ele.productDescription+"</p></div></a></li>");
				})
			},
			error:function(e){
				
			}
		}); 
		
	}); 
	/* /* /* 校验用户名是否已存在 */
	/* function checkName(uname){
		var xmlhttp;
		
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//发送请求
		console.log("发送ajax"+uname);
		xmlhttp.open("GET","NameExistsServlet?uname="+uname,true);
		xmlhttp.send();
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				var result = xmlhttp.responseText;
				console.log(result);
				if(result == "true"){
					document.getElementById("unametips").innerHTML="用户名已存在";
					document.getElementById("unametips").style.color="red";
				} else{
					document.getElementById("unametips").innerHTML="用户名可用";
					document.getElementById("unametips").style.color="#ccc";
					
				}
			}
		}
	} */
	/* 验证密码是否一致 */
	/*  function doblur(){
		var uPwd = document.getElementById("upwd");
		var rePwd = document.getElementById("repwd");
		uPwd = upwd.value;
		rePwd = repwd.value;
		console.log(uPwd);
		console.log(rePwd);
		var rePwdTips = document.getElementById("upwdtips");
		
		if(uPwd != rePwd){
			rePwdTips.innerHTML="密码不一致";
			rePwdTips.style.color="red";
			document.getElementById("repwd").focus();
		}else{
			rePwdTips.innerHTML="两次密码要输入一致哦";
			rePwdTips.style.color="#ccc";
		}
	} 
	/* 校验手机号 */
	/* function checkPhoneNum(phoneNum){
		var result = isPoneAvailable(phoneNum);
		var phoneTips = document.getElementById("phonetips");
		var phoneNum = document.getElementById("phoneNum");
		if(result){
			phoneTips.innerHTML="手机号正确";
			phoneTips.style.color="#ccc";
		}else{
			phoneTips.innerHTML="请输入正确手机号";
			phoneTips.style.color="red";
			document.getElementById("phoneNum").focus();
		}
	} */
	/* 校验邮箱 */
	/* function checkEmail(emailNum){
		var result = isEmailAvailable(emailNum);
		var emailTips = document.getElementById("emailtips");
		var emailNum = document.getElementById("emailNum");
		if(result){
			emailTips.innerHTML="请输入有效的邮箱号";
			emailTips.style.color="#ccc";
		}else{
			emailTips.innerHTML="请输入正确的邮箱号";
			emailTips.style.color="red";
			document.getElementById("emailNum").focus();
		}
	} */
	/* 校验验证码 */
	/* function checkCode(checknum){
		var xmlhttp;
		var checkNum = document.getElementById("checkNum");
		checkNum = checkNum.value;
		console.log(checkNum);
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//发送请求
		console.log("发送ajax"+checknum);
		xmlhttp.open("GET","CheckCodeServlet?checknum="+checknum,true);
		xmlhttp.send();
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				var result = xmlhttp.responseText;
				console.log(result);
				if(result == "true"){
					document.getElementById("checkNum").innerHTML="验证码正确";
					document.getElementById("checkNum").style.color="#ccc";
				}else{
					document.getElementById("checkNum").innerHTML="验证码错误";
					document.getElementById("checkNum").style.color="red";
				}
			}
		}
		
	} */
	</script> 
</body>
</html>